import React, { useEffect, useState } from 'react'
import { Card, Divider, ProgressBar, Badge } from 'antd-mobile'
import { EnvironmentOutline, CloseOutline, FileOutline, ShopbagOutline, PayCircleOutline, UnorderedListOutline, TruckOutline } from 'antd-mobile-icons'
import TabBar1 from '../../../components/TabBar/TabBar'
import { useNavigate } from 'react-router-dom'
import { removeLogin } from '../../../redux/user_reducer'
import { useDispatch } from 'react-redux'
export default function My() {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  let obj = { name: '西瓜', img: 'https://img2.baidu.com/it/u=2900710564,2408084692&fm=253&fmt=auto&app=138&f=JPEG' }
  let [today, setDate] = useState('无法获取日期')
  useEffect(() => {
    getDay()
  }, [])
  let getDay = () => {
    var currentDate = new Date()
    var year = currentDate.getFullYear()
    var month = currentDate.getMonth() + 1
    setDate(year + '.' + month)
  }
  return (
    <div style={{ background: 'linear-gradient(to bottom, rgb(255,102,0), rgb(246,246,246))', }}>
      {/* 顶部 */}
      <div style={{ padding: '6% 0', textAlign: 'center', color: 'white', fontSize: 'large', fontWeight: 'bold' }}>我的</div>
      {/* 用户卡片 */}
      <Card style={{ margin: '0 auto', position: "relative", width: '90%', }}>
        {/* 用户个人信息 */}
        <div style={{ marginLeft: '3%', display: 'flex', }}>
          <div style={{ position: 'absolute', top: '-1em', }}>
            <Badge content='V1' color='rgb(255,102,0)' style={{ '--right': '15%', '--top': '90%', }}>
              <img src={obj.img} alt="" style={{ width: '5em',height: '5em', border: '0.3em white solid', borderRadius: '50%' }} />
            </Badge>
          </div>
          <div style={{ marginLeft: '26%', }}>
            <div style={{ fontSize: 'large', marginTop: '-10%' }}>Hi，{obj.name}</div>
            <div style={{ color: 'rgb(153,153,153)', marginTop: '5%' }}>成长值12/200</div>
            <div style={{ width: '160%', marginTop: '10%' }}>
              <ProgressBar percent={20} style={{ '--track-color': 'rgb(216,216,216)', '--fill-color': 'rgb(255,102,0)', '--track-width': '5px', }} />
            </div>
          </div>
        </div>
        {/* 用户相关信息 */}
        <div style={{ display: 'flex', justifyContent: "space-around", textAlign: 'center', marginTop: '5%' }}>
          <div onClick={() => alert('跳转到累计消费页面')}>
            <div style={{ fontSize: '1.7em' }}>{today}</div>
            <div style={{ fontSize: 'small', color: 'rgb(153,153,153)' }}>累计消费</div>
          </div>
          <div onClick={() => alert('跳转到饭卡余额页面')}>
            <div style={{ fontSize: '1.7em' }}>68</div>
            <div style={{ fontSize: 'small', color: 'rgb(153,153,153)' }}>饭卡余额</div>
          </div>
          <div onClick={() => alert('跳转到优惠券页面')}>
            <div style={{ fontSize: '1.7em' }}>1</div>
            <div style={{ fontSize: 'small', color: 'rgb(153,153,153)' }}>优惠券</div>
          </div>
        </div>
      </Card>
      {/* 功能卡片 */}
      <Card style={{ margin: '0 auto', marginTop: "1em", width: '90%', }}>
        <div style={{ fontSize: '1.1em' }} onClick={() => alert('跳转到收货地址页面')} ><EnvironmentOutline fontSize={20} /> 收货地址</div>
        <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
        <div style={{ fontSize: '1.1em' }} onClick={() => alert('跳转到饭卡充值页面')} ><PayCircleOutline fontSize={20} /> 饭卡充值</div>
        <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
        <div style={{ fontSize: '1.1em' }} onClick={() => alert('跳转到评论管理页面')} ><FileOutline fontSize={20} /> 评论管理</div>
        <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
        <div style={{ fontSize: '1.1em' }} onClick={() => alert('跳转到商家入驻页面')} ><ShopbagOutline fontSize={20} /> 商家入驻</div>
        <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
        <div style={{ fontSize: '1.1em' }} onClick={() => alert('跳转到兼职管理页面')} ><UnorderedListOutline fontSize={20} /> 兼职管理</div>
        <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
        <div style={{ fontSize: '1.1em' }} onClick={() => alert('跳转到开始跑腿页面')} ><TruckOutline fontSize={20} /> 开始跑腿</div>
        <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
        <div style={{ fontSize: '1.1em' }} onClick={() => {
          navigate('/choiceLogin')
          dispatch(removeLogin())
        }} ><CloseOutline fontSize={20} /> 退出登录</div>
      </Card>

      <TabBar1></TabBar1>
    </div>
  )
}
